<template>
<!--  <el-dialog :visible.sync="visible" :title="dataForm.filename+' 属性'" :close-on-click-modal="false" :close-on-press-escape="false" v-dialogDrag :modal="false" custom-class="oss-file-info">-->
  <el-dialog :visible.sync="visible" :title="dataForm.filename+' 属性'" v-dialogDrag append-to-body width="350px" custom-class="oss-file-info">
    <el-form :model="dataForm" ref="dataForm" label-position="left" class="demo-table-expand" v-loading="dataListLoading">
<!--      label-width="120px"-->
      <el-form-item label="文件名称：">
        <span>{{ dataForm.filename }}</span>
      </el-form-item>
      <el-form-item label="文件大小：">
        <span v-if="!dataForm.size">正在计算...</span>
        <span v-if="dataForm.size">{{bytesToSize(dataForm.size)}}（{{ dataForm.size }}字节）</span>
      </el-form-item>
      <el-form-item label="创建时间：">
        <span>{{ dataForm.createInstantDateFormat }}</span>
      </el-form-item>
      <el-form-item label="修改时间：" v-if="!dataForm.isDir">
        <span>{{ dataForm.updateInstantDateFormat }}</span>
      </el-form-item>
      <el-form-item label="包含：" v-if="dataForm.isDir">
        <span>{{ dataForm.fileCount || '正在计算...'}}个文件，{{dataForm.dirCont || '正在计算...'}}个文件夹</span>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import numberUtils from '@/utils/NumberUtils.js' // 计算相关工具
export default {
  data () {
    return {
      visible: false,
      dataListLoading: false, // 数据，loading状态
      dataForm: {
        // 路径
        path: '',
        // 文件名
        filename: '',
        // 是否文件夹
        isDir: '',
        // 文件后缀
        suffix: ''
      }
    }
  },
  computed: {
    formatTow () {
      return (price) => {
        price = price + ''
        const pointIndex = price.indexOf('.')
        if (pointIndex !== -1) {
          return price.substring(0, pointIndex + 3)
        } else {
          return price
        }
      }
    },
    bytesToSize () {
      return (bytes) => {
        let temp = bytes
        let units = ''
        if (bytes < 1024) {
          units = 'B'
        } else if (bytes < (1024 * 1024)) {
          temp = numberUtils.divide(bytes, 1024)
          units = 'KB'
        } else if (bytes < (1024 * 1024 * 1024)) {
          temp = numberUtils.divide(bytes, (1024 * 1024))
          units = 'MB'
        } else {
          temp = numberUtils.divide(bytes, (1024 * 1024 * 1024))
          units = 'GB'
        }
        return this.formatTow(temp) + units
      }
    }
  },
  methods: {
    init () {
      this.visible = true
      this.$nextTick(() => {
        this.$refs.dataForm.resetFields()
        if (this.dataForm.path) {
          this.getInfo()
          this.getInfoMx()
        }
      })
    },
    // 获取信息
    getInfo () {
      this.dataListLoading = true
      this.$http.get('/sys/oss/fileInfo', {
        params: { path: this.dataForm.path }
      }).then(({ data: res }) => {
        this.dataListLoading = false
        if (res.code !== 0) {
          this.visible = false
          return this.$message.error(res.msg)
        }
        this.dataForm = {
          ...this.dataForm,
          ...res.data
        }
      }).catch(() => {
        this.visible = false
        this.dataListLoading = false
      })
    },
    // 获取信息 文件大小之类较慢的数据获取
    getInfoMx () {
      this.dataListLoading = true
      this.$http.get('/sys/oss/fileInfoMx', {
        params: { path: this.dataForm.path }
      }).then(({ data: res }) => {
        this.dataListLoading = false
        if (res.code !== 0) {
          this.visible = false
          return this.$message.error(res.msg)
        }
        this.dataForm = {
          ...this.dataForm,
          ...res.data
        }
        console.log(res)
      }).catch(() => {
        this.visible = false
        this.dataListLoading = false
      })
    }

  }
}
</script>
<style scoped>
.el-form-item{
  margin-bottom: 0;
}
/*.oss-file-info{
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
  box-shadow: 0 0 10px #ccc;
  margin: 0;
  height: 350px;
  position:absolute;
  top: 20%;
  right: calc(50% - 175px);
}*/
</style>
<style>
.oss-file-info .el-dialog__body{
  padding: 0px 20px 10px 20px;
}
.oss-file-info .el-form-item__label,.oss-file-info .el-form-item__content{
  line-height: 30px;
}
</style>
